---
title: Material Tailwind with Astro - Installation Guide
description: Learn how to use Material Tailwind components with Astro and Tailwind CSS to easily create elegant and flexible pages.
github: guide/astro
prev: docs/react/guide/remix
next: docs/react/guide/vite
---

# Material Tailwind with Astro

Learn how to setup and install `@material-tailwind/react` with Astro.

---

## Creating an Astro Project

First, create a new Astro project using the command below, it will create a new Astro project.

For more details check the <Link href="https://docs.astro.build/en/install/auto/?ref=material-tailwind" target="_blank">Astro Official Documentation</Link>.

<CodePreview>
```bash
npm create astro@latest my-project
```
</CodePreview>

---

## Add React to Astro

Next, you need to add React to your Astro project by running the following command:

<CodePreview>
```bash
npx astro add react
```
</CodePreview>

---

## Add Tailwind CSS to Astro

Next, you need to install and configure Tailwind CSS by running the following command:

<CodePreview>
```bash
npx astro add tailwind
```
</CodePreview>

---

## Install Material Tailwind

Once you installed and configured Tailwind CSS, you need to install `@material-tailwind/react` by running the following command:

<CodePreview>
```bash
npm i @material-tailwind/react@beta
```
</CodePreview>

---

## Add Plugin and Template Path

Once you installed `@material-tailwind/react` you need to add `mtConfig` and the template path to your `tailwind.config.mjs` file.

<CodePreview>
```ts
// highlight(1,7,12)
import { mtConfig } from "@material-tailwind/react";

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "./node_modules/@material-tailwind/react/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [mtConfig],
}
```
</CodePreview>

---

## Example

Now you're ready to use Material Tailwind components in your Astro project. Here's an example of how to use the `Button` component:

<OldComponentPreview demo={<Button.ButtonDemo />}>
```html
<!-- highlight(2,14) -->
---
import { Button } from "@material-tailwind/react";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <Button>Button</Button>
  </body>
</html>
```
</OldComponentPreview>